/** @jsxImportSource @emotion/react */
import * as React from "react";
import { InternalItemHandResult, ReportViewProps } from "./common/base";
import {useFragment} from "react-relay";

const graphql = require("babel-plugin-relay/macro");


interface ReportStarterProps {
    id: string;
    source: any;
    template: React.ReactElement<React.ForwardRefRenderFunction<InternalItemHandResult,ReportViewProps>>;
    /**嵌套组件的传递relay Ref*/
    items: any;
}
/** 正式报告：两个地方引用作为入口的：1：打印预览正式报告的全屏模式(全部显示要给打印准备)；2：作为嵌入式列表导航目的的在编辑器左边页面显示的(可折叠可点击展开的)。
 * 报告全屏幕显示的、打印！，原始记录也可能嵌入到左边的列表框框位置的用来点击每一条小小项目查看：
 * 模板template的report必须的，template.report就是组件。
 * reportView和原始记录路由这两个都会进入这里。
 * */
export const ReportStarter: React.FunctionComponent<ReportStarterProps> = ({
   id,items,
   source,
   template,
   ...other
}) => {
    //初始化不可以直接取React.useState(source || {})，不然路由器切换就变成旧source。新修改被抛弃了。【报告系统代码部分能够看见的模型入口都在这里】
    //这个最后也要加上，不然没数据；
    const rep = useFragment(
        graphql`
            fragment ReportStarterIsp on Report
            {
                id, modeltype, modelversion, tzFields,
                isp {
                    id, no, report{id},
                    dev{id cod},bsType,
                    reps {
                        edges {
                            node {
                                id, modeltype, modelversion,data,
                                stm{id,sta,
                                    authr{ id, username, person {id, name} },
                                    reviewer{ id, username, person {id, name} }
                                }
                            }
                        }, 
                    }, 
                    ispMen { id, username, person {id, name} },
                    checkMen { id, username, person {id, name} }
                    ispu{id agency{id,apno,bjtel,bjurl},name},
                    bus{id,
                        pipus{id crDate code rno name start stop nxtd1 nxtd2 leng level lay safe svp pa}
                    }
                }
            }
        `,
        items
    );

    console.log("左边或预览：ReportStarter捕获source=", source,"新items=",items,"id=",id);
    if (!id) {
        return null;
    }
    //无法把<EditStorageContext.Provider value={{storage,setStorage}}>放这附近能产生效果，必须提升到顶级路由组件内去做。
    //到了这一步：把data数据给PeriodicalInspection.R-1.tsx文件对应ReportView组件就是了：
    return (
        <React.Fragment>
            {
                //useMemo使用后：各分区项目子组件inp各自独立的，分区项目子组件内若使用setInp(null) 清空重置后，无法靠重新拉取后端数据来保证恢复显示。
                //各个具体目录的报告模板入口*.E.tsx组件:项目子组件使用setInp(null) 重置后，若上级组件重新取后端数据没变化的，也必须再次路由后再进入才可以让各分区项目子组件render恢复显示数据。
                source?  items && React.cloneElement(template as React.ReactElement<any>, {
                        source,
                        repId: id,
                        rep,
                    })
                    :
                <>稍后，后端还没有给数据！</>
            }
        </React.Fragment>
    );
}


